<template>
  <md-popup id="charge-detail" v-model="value" position="bottom" :has-mask="false" prevent-scroll @hide="cancel">
    <md-popup-title-bar class="title-bar" title="费用明细" cancel-text="关闭" @cancel="cancel"></md-popup-title-bar>
    <charge-details :costId="costId" :hideTopBar="true" @gotoRules="cancel"></charge-details>
  </md-popup>
</template>

<script>
import { Popup, PopupTitleBar } from 'mand-mobile';
import beforechargesDetails from '@/views/chargesDetails/beforechargesDetails';
export default {
  name: 'charge-detail-container',
  components: {
    [Popup.name]: Popup,
    [PopupTitleBar.name]: PopupTitleBar,
    [beforechargesDetails.name]: beforechargesDetails
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    appendTo: {
      default: () => document.body
    },
    costId: {
      type: String,
      default: ''
    },
    hideTopBar: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    cancel() {
      this.value = false;
      this.$emit('cancel');
    }
  },
  mounted() {
    if (this.appendTo) {
      this.appendTo.appendChild(this.$el);
    }
  },
  beforeDestroy() {
    if (this.appendTo) {
      this.appendTo.removeChild(this.$el);
    }
  }
};
</script>

<style lang="stylus" scoped>
#charge-detail {
  .title-bar {
    height: 88px;
  }
}
</style>
